<template>
    <div class="flow-config">
      <!-- 普通客户设置 -->
      <el-card class="config-card">
        <div slot="header" class="card-header">
          <span class="card-title">普通客户：</span>
        </div>
        
        <div class="config-item">
          <span class="label">首跟流转：</span>
          <el-input 
            v-model="formData.normal.firstFollow" 
            placeholder="24" 
            class="number-input"
            type="number"
            min="1"
          />
          <span class="suffix">小时未跟进流转到部门公海</span>
        </div>
        
        <div class="config-item">
          <span class="label">连跟流转：</span>
          <el-input 
            v-model="formData.normal.continuousFollow" 
            placeholder="7" 
            class="number-input"
            type="number"
            min="1"
          />
          <span class="suffix">天未跟进流转到部门公海</span>
        </div>
        
        <div class="config-item">
          <span class="label">成单流转：</span>
          <el-input 
            v-model="formData.normal.orderComplete" 
            placeholder="30" 
            class="number-input"
            type="number"
            min="1"
          />
          <span class="suffix">天未成单流转到部门公海</span>
        </div>
      </el-card>
  
      <!-- 大客户设置 -->
      <el-card class="config-card">
        <div slot="header" class="card-header">
          <span class="card-title">大客户：</span>
        </div>
        
        <div class="config-item">
          <span class="label">首跟流转：</span>
          <el-input 
            v-model="formData.vip.firstFollow" 
            placeholder="48" 
            class="number-input"
            type="number"
            min="1"
          />
          <span class="suffix">小时未跟进流转到大客户公海</span>
        </div>
        
        <div class="config-item">
          <span class="label">连跟流转：</span>
          <el-input 
            v-model="formData.vip.continuousFollow" 
            placeholder="14" 
            class="number-input"
            type="number"
            min="1"
          />
          <span class="suffix">天未跟进流转到大客户公海</span>
        </div>
        
        <div class="config-item">
          <span class="label">成单流转：</span>
          <el-input 
            v-model="formData.vip.orderComplete" 
            placeholder="60" 
            class="number-input"
            type="number"
            min="1"
          />
          <span class="suffix">天未成单流转到大客户公海</span>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'FlowConfig',
    props: {
      configData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        formData: {
          normal: { firstFollow: '', continuousFollow: '', orderComplete: '' },
          vip: { firstFollow: '', continuousFollow: '', orderComplete: '' }
        }
      }
    },
    watch: {
      configData: {
        immediate: true,
        handler(newVal) {
          if (newVal) {
            this.formData = { ...this.formData, ...newVal }
          }
        }
      }
    },
    methods: {
      getFormData() {
        return this.formData
      },
      handleReset() {
        this.formData = {
          normal: { firstFollow: '', continuousFollow: '', orderComplete: '' },
          vip: { firstFollow: '', continuousFollow: '', orderComplete: '' }
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .flow-config {
    padding: 20px;
  }
  
  .config-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    font-weight: bold;
  }
  
  .card-title {
    font-size: 16px;
    color: #303133;
  }
  
  .config-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 0;
  }
  
  .label {
    width: 100px;
    text-align: right;
    margin-right: 15px;
    color: #606266;
    font-size: 14px;
  }
  
  .number-input {
    width: 100px;
    margin-right: 10px;
  }
  
  .suffix {
    color: #606266;
    font-size: 14px;
  }
  </style>